<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | Starter</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="__ADMINLTE__/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  <!-- daterange picker -->
  <link rel="stylesheet" href="__ADMINLTE__/plugins/daterangepicker/daterangepicker-bs3.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="__ADMINLTE__/dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
        page. However, you can choose any other skin. Make sure you
        apply the skin class to the body tag so the changes take effect.
  -->
  <link rel="stylesheet" href="__ADMINLTE__/dist/css/skins/skin-blue.min.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <!-- Main Header -->
  <include file="./Public/AdminLTE/header.html" />
  <!-- Left side column. contains the logo and sidebar -->
  <include file="./Public/AdminLTE/aside.html" />

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        General Form Elements
        <small>Preview</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">Forms</a></li>
        <li class="active">General Elements</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        
        <!-- right column -->
        <div class="col-md-12">
          <!-- Horizontal Form -->
          <div class="box box-info">
            <div class="box-header with-border">
              <h3 class="box-title">添加工作安排</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            <form class="form-horizontal" action="__CONTROLLER__/addwork" method="post" id="workform">
              <div class="box-body">
                <div class="form-group">
                  <label for="inputtitle" class="col-sm-1 control-label">工作名称</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputtitle" name="title">
                  </div>
                </div>

                <div class="form-group">
                <label class="col-sm-1 control-label">时间安排</label>

                <div class="col-sm-10">
                  <input type="text" class="form-control pull-right" id="reservation" placeholder="起始 和 结束时间 不能相同,从当天0点开始">
                </div>
              </div>

              <div class="form-group">
                  <label class="col-sm-1 control-label">选择员工</label>
                  <div class="col-sm-2">
                    <span>选择组</span>
                    <select class="form-control" id="workgroup">
                    <volist name="group" id="vo">
                    <option value="{$vo.id}">{$vo.name}</option>
                    </volist>
                  </select>
                  </div>
                  <div class="col-sm-3">
                  <span>选择组员工(可多选)</span>
                    <select multiple="" class="form-control" id="wgusers" size="8">
                  </select>
                  </div>
                  <div class="col-sm-1 btn-group-vertical">
                      <button type="button" class="btn btn-info" id="addop">添加</button>
                      <button type="button" class="btn btn-warning" id="remop">移除</button>
                  </div>
                  <div class="col-sm-3">
                  <span>最终选择的员工</span>
                    <select multiple="" class="form-control" id="tousers" size="8">
                  </select>
                  </div>
              </div>

              <div class="form-group">
                  <label for="inputtitle" class="col-sm-1 control-label">备注</label>
                  <div class="col-sm-10">
                    <textarea class="form-control" rows="3" name="remark"></textarea>
                  </div>
                </div>

              </div>
              <input type="hidden" name="planner" value="2">
              <!-- /.box-body -->
              <div class="box-footer">
                <button type="reset" class="btn btn-default">重置</button>
                <button type="submit" class="btn btn-info pull-right">发布</button>
              </div>
              <!-- /.box-footer -->
            </form>
          </div>
          <!-- /.box -->
         
          <!-- /.box -->
        </div>
        <!--/.col (right) -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  <footer class="main-footer">
    <div class="pull-right hidden-xs">
      <b>Version</b> 2.3.3
    </div>
    <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights
    reserved.
  </footer>

</div>
<!-- ./wrapper -->

<!-- jQuery 2.2.0 -->
<script src="__ADMINLTE__/plugins/jQuery/jQuery-2.2.0.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="__ADMINLTE__/bootstrap/js/bootstrap.min.js"></script>
<!-- date-range-picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="__ADMINLTE__/plugins/daterangepicker/daterangepicker.js"></script>
<!-- AdminLTE App -->
<script src="__ADMINLTE__/dist/js/app.min.js"></script>

<script type="text/javascript">
$(function(){
  //日期初始化
  var timesta="",timeend="";
  $('#reservation').daterangepicker({
    locale:{
      applyLabel: '确认',
      cancelLabel: '取消',
      fromLabel : '起始时间',
      toLabel : '结束时间'
    },
    separator : ' 至 ',
    format: 'YYYY-MM-DD'
  },function(start,end,label){
      timesta = start.format('YYYY-MM-DD');
      timeend = end.format('YYYY-MM-DD');
  });

  //组成员
  $("#workgroup").change(function(){
    var id = $("#workgroup").val();
    $("#wgusers").empty();
    setwgusers(id);
  });
  setwgusers(1);
  var tousers = [];
  //添加项
  $("#addop").on("click",function(){
    var gpname = $("#workgroup").find("option:selected").text();
    var userid = $("#wgusers").val();
    var ids = userid.toString().split(',');
    for (var i = 0; i <ids.length; i++) {
        if ($.inArray(ids[i],tousers)==-1) {
          tousers.push(ids[i]);
          $.get("__MODULE__/User/getuserbyid/"+ids[i],function(data){
            $("#tousers").append("<option value="+data.id+">"+data.name+"&nbsp;&nbsp;&nbsp;&nbsp;["+gpname+"]</option>");
          });
        }
    } 
  });
  //移除项
  $("#remop").on("click",function(){
      var reuserid = $("#tousers").val();
      var reids = reuserid.toString().split(',');
      for (var i = 0; i <reids.length; i++) {
        var dex = $.inArray(reids[i],tousers);
        tousers.splice(dex,1);
        $("#tousers option[value="+reids[i]+"]").remove();
      }
  });
  function setwgusers(id){
    $.get("__MODULE__/Workgroup/getuserbygroup/"+id,function(data){
      for(x in data){
        $("#wgusers").append("<option value='"+data[x].id+"'>"+data[x].name+"</option>");
      }
    });
  }
  //表单提交
  $("#workform").submit(function(){
       if($("#inputtitle").val()=="" || timesta>=timeend || tousers.length==""){
        alert("请填写正确");
        return false;
       }
       var users =$("<input type='hidden' name='users' value="+tousers+" />");
       var timestart =$("<input type='hidden' name='timesta' value="+timesta+" />");
       var timeendd =$("<input type='hidden' name='timeend' value="+timeend+" />");
       $("#workform").append(users);
       $("#workform").append(timestart);
       $("#workform").append(timeendd);
       $("#workform").submit();
  });

});
</script>
</body>
</html>
